<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<%@ include file="/WEB-INF/views/include/easyui.jsp"%>

<script type="text/javascript" charset="utf-8"
	src="<%=path%>/static/plugins/editor/wangEditor.min.js"></script>
<%-- <script type="text/javascript" charset="utf-8"
	src="<%=path%>/static/js/utils/lx.js"></script> --%>
</head>
<style>
.formTable {
	width: 100%;
}

.formTable a {
	font-size: 12px;
}

.title {
	width: 45px;
	font-size: 12px;
	font-family: '宋体';
	text-align: right;
}

.input {
	height: 30px;
}

a {
	color: #333;
	text-decoration: none;
}

.toolbar {
	border: 1px solid #ccc;
	width: 99%;
}

.text {
	border-top: 1px solid #ccc;
	width: 99%;
}

.annex {
	width: 99%;
	background-color: #ccc;
}

.w-e-text-container {
	z-index: 2 !important;
}

.w-e-menu {
	z-index: 2 !important;
}
#search3 .datagrid-row-selected{background:transparent;}
</style>
<body style="font-family: '微软雅黑'" class="easyui-layout">
	
	<div data-options="region:'east',title:'通讯录',split:true" style="width:200px;">
<!--  		<input class="easyui-searchbox" id="4ee" onkeyup="getLinkData()" data-options="prompt:'查找联系人...',searcher:doSearch" style="width:180px"></input>
 --> 		
 		<input type="text" onkeyup="getLinkData()" id="search" name="search" style="width:175px;height:20px;border:1px solid #95B8E7;border-radius:5px"/>
		<div id="popup" style="overflow-y:scroll;background: #fffafa;position: absolute;z-index: 999">
             <table width="100%" bgcolor="#fffafa">
                 <tbody id="popupBody"></tbody>
             </table>
        </div>
        
		<div class="easyui-accordion">
			<div id="search1" title="最近联系人" style="width:180px;height:350px;"
			 data-options="collapsible:true,collapsed:true">
				
				
			</div>
			<div id="search2"  title="邮箱联系人" style="width:180px;height:350px;" data-options="collapsible:true,collapsed:true">
				<!-- 个人邮箱联系人 -->
				<ul id="private_tree" class="easyui-tree"></ul>
				<div id="parentNode" class="easyui-menu" style="width: 120px;">  
					<div onclick="addTree()" data-options="iconCls:'icon-metro-plus'" ></span>&nbsp;&nbsp;添加</div>  
					<div onclick="editTree()" data-options="iconCls:'icon-metro-pencil'"></span>&nbsp;&nbsp;修改</div>
					<div onclick="removeTree()" data-options="iconCls:'icon-metro-minus'"></span>&nbsp;&nbsp;删除</div>  
				</div> 
			</div>
			<div id="search3" title="系统联系人" style="width:180px;height:370px;" data-options="collapsible:true">
				
				<table id="org_dg"></table>
				
			</div>
		</div>
	</div>
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    <form action="<%=path %>/mail/save" id="mainForm" method="post">
	<table class="formTable">
		<tr>
			<td class="title"><div style="width:50px;">收件人</div></td>
			<td><input type="text" id="addressee" name="consigneeVal" class="easyui-validatebox" value="${bean.consigneeVal }"
				style="width: 98%; height: 25px;" />
				<input type="hidden" name="consigneeTeam" id="addresseeTeam" value="${bean.consigneeTeam }" />
			</td>
		</tr>
		<tr id="tr_cc" <c:if test="${empty bean.ccVal}">style="display:none"</c:if>>
			<td class="title">抄送</td>
			<td><input id="cc_val" type="text" name="ccVal" class="easyui-validatebox"  value="${bean.ccVal }"
				style="width: 98%; height: 25px;" />
				<input type="hidden" id="cc_valTeam" name="ccTeam" value="${bean.ccTeam }" />
			</td>
		</tr>
		<tr id="tr_hide" <c:if test="${empty bean.secretVal}">style="display:none"</c:if>>
			<td class="title">密送</td>
			<td><input id="hide_val" type="text" name="secretVal" class="easyui-validatebox" value="${bean.secretVal }"
				style="width: 98%; height: 25px;" />
				<input type="hidden" id="hide_valTeam" name="secretTeam" value="${bean.secretTeam }"/>
			</td>
		</tr>
		<tr style="height: 25px;">
			<td></td>
			<td><a id="cc" href="javascript:;"><c:if test="${empty bean.ccVal}">添加</c:if><c:if test="${not empty bean.ccVal}">删除</c:if>抄送</a>&nbsp;<span
				class="toolbar-item dialog-tool-separator"></span>&nbsp;<a id="hide"
				href="javascript:;"><c:if test="${empty bean.secretVal}">添加</c:if><c:if test="${not empty bean.secretVal}">删除</c:if>密送</a>&nbsp; <span
				class="toolbar-item dialog-tool-separator"></span>&nbsp;<a
				href="javascript:sendSigln()">分别发送</a></td>
		</tr>
		<tr>
			<td class="title">主题</td>
			<td><input type="text" class="easyui-validatebox" name="mailTitle" value="${bean.mailTitle }"
				style="width: 98%; height: 25px;" /></td>
		</tr>
		
		<input type="hidden" id="annexs" name="annexVal" class="easyui-validatebox" value="${bean.annexVal }"
				style="width: 98%; height: 25px;" />
		<input type="hidden" id="mailContent" name="mailContent" />
		<input type="hidden" id="mailStatu" name="mailStatu" />
		<tr>
			<td></td>
			<td><a id="addAnnexes" class="easyui-linkbutton" plain="true"
				iconCls="icon-cologne-cv" onclick="addAnnex()">添加附件</a>&nbsp;<span
				class="toolbar-item dialog-tool-separator"></span>&nbsp;<a
				id="addPhoto" class="easyui-linkbutton" plain="true"
				iconCls="icon-hamburg-pictures" onclick="addPhoto()">图片</a>&nbsp; <span
				class="toolbar-item dialog-tool-separator"></span>&nbsp;<a
				id="addDoc" class="easyui-linkbutton" plain="true"
				iconCls="icon-hamburg-attibutes" onclick="addDoc()">文档</a>&nbsp; <span
				class="toolbar-item dialog-tool-separator"></span>&nbsp;<a
				id="showStyle" class="easyui-linkbutton" plain="true"
				iconCls="icon-metro-paypal3" href="javascript:;">格式</a></td>
		</tr>
		<tr>
			<td class="title" valign="top">正文</td>
			<td>
				<div class="annex">
					<ul style=" margin: 0;padding: 0;" id="annexList">
						<c:forEach var="annex"   items="${bean.annexs }">
							<li style="list-style-type: none;"><a class="easyui-linkbutton" plain="true" iconCls="icon-cologne-cv">
							${annex.annexName}</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" class="delAnnex" target="${annex.annexName}|${annex.annexPath}|${annex.annexSize}|${annex.annexSuffix}">删&nbsp;除</a></li>
						</c:forEach>
					</ul>

				</div>
				<div id="div2" class="text" style="z-index: 2">${bean.mailContent }</div>
			</td>
		</tr>
		<tr>
			<td colspan="2" style="font-family: '宋体';font-size:12px">
				<input type="checkbox" name="isUrgent" value="1" />紧急 &nbsp;<input type="checkbox" name="isReceipt" value="1" />需要回执
			</td>
		</tr>
		<tr style="background-color:#ccc;">
			<td colspan="3">
				<a id="addAnnexes" class="easyui-linkbutton" plain="true"
				iconCls="icon-hamburg-sign-up" onclick="send()">发送</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a id="addAnnexes" class="easyui-linkbutton" plain="true"
				iconCls="icon-hamburg-full-time" onclick="quartz()">定时发送</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a id="addAnnexes" class="easyui-linkbutton" plain="true"
				iconCls="icon-hamburg-docs" onclick="save()">存草稿</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				
			</td>
		</tr>
	</table>
	</form>
    </div>
	
	<div id="dlg"></div>
	
	<div id="addOrUpdate" class="easyui-dialog" closed="true" style="width:400px;height:150px;" 
	data-options="iconCls:'icon-save',resizable:true,modal:true,title:'addOrUpdate'">   
		<form id="addOrUpdateForm">
			<table width="100%" height="70%">
				<tr>
					<td>类别:<select style="width:148px;" id="Type" name="Type" >
						<option value="0">分组</option>
						<option value="1">用户</option>
					</select></td>
					<td>名称:<input type="text" id="Name" name="Name" style="width:145px;"></input></td>
				</tr>
				<tr>
					<td>邮箱:<input type="text" id="Email" name="Email" style="width:145px;"></input></td>
					<td></td>
				</tr>
			</table>
		</form>
		<div id="quy-buttons" style="text-align: center;border-top:1px solid #ccc;padding:10px;">
			<a onclick="addOrUpdateTree()" class="easyui-linkbutton" iconCls="icon-ok" >提交</a>
			<a style="margin-left: 10px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addOrUpdate').dialog('close');">取消</a>
		</div>
	</div>
	
</body>



<script type="text/javascript">
	
	var E = window.wangEditor;
	var editor = new E('#div2') // 
	// 自定义菜单配置
	editor.customConfig.menus = [ 'bold', // 粗体
	'italic', // 斜体
	'underline', // 下划线
	'strikeThrough', // 删除线
	'foreColor', // 文字颜色
	'backColor', // 背景颜色
	'link', // 插入链接
	'list', // 列表
	'justify', // 对齐方式
	'quote', // 引用

	]
	// 或者 var editor = new E( document.getElementById('#editor') )
	editor.create()
</script>

<script>
//个人通讯录加载
var index;
$('#private_tree').tree({    
	    url:'<%=path %>/pab/getPabInit',
        animate:false,
        lines:true,
        //checkbox:true,  
        //onlyLeafCheck:true,//叶子结点添加复选框  
        onContextMenu: function(e, node){
		  	e.preventDefault();
		  	// 查找节点
		 	$('#private_tree').tree('select', node.target);
			// 显示快捷菜单
			$('#parentNode').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
		},
		onClick:function(node){
			 //级联选择
            var user=node.text;
            var childVal="";
            if(node.iconCls!="icon-hamburg-hire-me"){
            	//var stricon=JSON.stringify($(this).tree('getChildren',node.id));
            	childVal=teamHandlers(node.text,$(this).tree('getChildren',node.target));
            }
            user=userHandler(user);
            //如果已经存在则移除掉
            if($("#"+defaultSelect).val().indexOf(user)!=-1){
            	$("#"+defaultSelect).val($("#"+defaultSelect).val().replace(user,""));
            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val().replace(childVal,""));
            }else{
            	$("#"+defaultSelect).val($("#"+defaultSelect).val()+user);
            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val()+childVal);
            }
		},
		onLoadSuccess:function(node, data){
			
		}
     });
     
     
     function removeTree(){
    	 var node = $('#private_tree').tree('getSelected');
    	 var type = "";
    	 if(node.iconCls=='icon-hamburg-hire-me'){
    		 type="1";
    	 }else{
    		 type="0";
    	 }
		 if(node!=null){
			 $.ajax({
				 url:'<%=path%>/personalMessage/remove',
				 type:'post',
				 data:{'ID':node.id,'type':type},
				 async:false,
				 success:function(data){
					 var r = eval('(' + data + ')');
					 if(r.success){
						 $.messager.show({
		 						msg : r.msg,
		 						title : '提示'
		 					});
						 $("#private_tree").tree('reload');
					 }else{
						 $.messager.show({
		 						msg : r.msg,
		 						title : '提示'
		 					});
					 }
				 }
			 });
			 
		 }
     }
     
     function addOrUpdateTree(){
    	 $('#addOrUpdate').window('open');
    	 var node = $('#private_tree').tree('getSelected');
    	 $('#addOrUpdateForm').form('submit', {   
			 url:'<%=path%>/personalMessage/addOrUpdate',  
			 onSubmit: function(param){
				 param.ID=node.id; 
				 param.index=index;
			 }, 
			 success: function(data){    
				 var r = eval('(' + data + ')');
				 if(r.success){
					 $.messager.show({
	 						msg : r.msg,
	 						title : '提示'
	 					});
					 $("#private_tree").tree('reload');
					 $('#addOrUpdate').dialog('close');
					 $('#addOrUpdateForm')[0].reset();
				 }else{
					 $.messager.show({
	 						msg : r.msg,
	 						title : '提示'
	 				});
				 }
			 }    
		});
     }
     
     function editTree(){
    	 index=0;
    	 var node = $('#private_tree').tree('getSelected');
    	 $('#addOrUpdate').dialog('open');
		 var nameAndEmil=node.text.split('<');
		 var name="";
		 var email="";
		 if(node!=null){
		    if(node.iconCls=='icon-hamburg-hire-me'){
		    	name=nameAndEmil[0];
				email=nameAndEmil[1].substring(0,nameAndEmil[1].length-1);
				$("#Type").val("1");
				$("#Type").find("option[text='用户']").attr("selected",true);
		    }else{
		    	name=nameAndEmil[0];
		    	$("#Type").val("0");
				$("#Type").find("option[text='分组']").attr("selected",true);
		    }
			$('#Email').val(email);
			$('#Name').val(name);
		}
     }
     
     function addTree(){
    	 index=1;
    	 $('#addOrUpdate').dialog('open');
     }
</script>



<script>
	var defaultSelect="addressee";
	var d;
	var org_dg;
	$(function() {
		org_dg=$('#org_dg').treegrid({  
			method: "get",
		    url:'<%=path %>/open/api/organization/getOrg', 
		    fit : true,
			fitColumns : true,
			border : false,
			idField : 'id',
			treeField:'orgName',
			parentField : 'pid',
			animate:true, 
			rownumbers:false,
			singleSelect:false,//需设置  
			striped:true,
		    columns:[[    
		        {field:'id',title:'id',hidden:true,width:100},    
		        {field:'orgName',title:'名称',width:100}
		    ]],
		    enableHeaderClickMenu: false,
		    enableHeaderContextMenu: false,
		    enableRowContextMenu: false,
		    dataPlain: true,
		    onClickRow:function(row){  
	            //级联选择
	            var user=row.orgName;
	            var childVal="";
	            if(row.orgType="organization"){
	            	childVal=teamHandler(row.orgName,$(this).treegrid('getChildren',row.id));
	            }
	            user=userHandler(user);
	            //如果已经存在则移除掉
	            if($("#"+defaultSelect).val().indexOf(user)!=-1){
	            	$("#"+defaultSelect).val($("#"+defaultSelect).val().replace(user,""));
	            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val().replace(childVal,""));
	            }else{
	            	$("#"+defaultSelect).val($("#"+defaultSelect).val()+user);
	            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val()+childVal)
	            }
	            
	            
	          	
	        }
			});
		$(".w-e-toolbar").hide();
		$("#cc").click(function() {
			if ($("#tr_cc").is(":hidden")) {
				$("#tr_cc").show();
				$(this).html("删除抄送");
				$("#cc_val").focus();
			} else {
				$("#tr_cc").hide();
				$("#cc_val").val("");
				$(this).html("添加抄送")
				defaultSelect="addressee";
			}
		})
		$("#hide").click(function() {
			if ($("#tr_hide").is(":hidden")) {
				$("#tr_hide").show();
				$(this).html("删除密送")
				$("#hide_val").focus();
			} else {
				$("#tr_hide").hide();
				$("#hide_val").val("");
				$(this).html("添加密送");
				defaultSelect="addressee";
			}
		})
		$("#showStyle").click(function() {
			if ($(".w-e-toolbar").is(":hidden")) {
				$(".w-e-toolbar").show();

			} else {
				$(".w-e-toolbar").hide();
			}
		})
		
		$(".delAnnex").on("click",function(){
			var target=$(this).attr("target");
			var annexVal=$("#annexs").val();
			annexVal=annexVal.replace(","+target,"");
			annexVal=annexVal.replace(target,"");
			$("#annexs").val(annexVal);
			//移除li
			$(this).parent().remove();
		})
		
		
		
	})
	function userHandler(val){
		val=val.replace(" &lt; ","<");
		val=val.replace(" &gt;",">");
		val=val+";";
		return val;
	}
	
	
	function teamHandler(name,obj){
		var teams="";
		teams="("+name+":{";
		for(var i=0;i<obj.length;i++){
    		if(obj[i].orgType=="sysuser"){
    			//添加到childVal
    			teams=teams+userHandler(obj[i].orgName);
    		}
    	}
		teams=teams+"}),";
		return teams;
	}
	
	function teamHandlers(name,obj){
		var teams="";
		teams="("+name+":{";
		for(var i=0;i<obj.length;i++){
    		if(obj[i].iconCls=="icon-hamburg-hire-me"){
    			//添加到childVal
    			teams=teams+userHandler(obj[i].text);
    		}
    	}
		teams=teams+"}),";
		return teams;
	}
	
	
	function sendSigln() {
		alert("规划功能，待实现");
	}
	
	function addPhoto(){
			//添加图片到textarel
			d=$('#dlg').dialog({    
			    title: '选择图片',    
			    width: 600,    
			    height: 320,    
			    closed: false,    
			    cache: false,
			    maximizable:true,
			    resizable:true,
			    href:'<%=path%>/mail/addPhoto',
				modal : true
		});

	}
	
	function addDoc(){
		//添加图片到textarel
		d=$('#dlg').dialog({    
		    title: '选择文档',    
		    width: 600,    
		    height: 320,    
		    closed: false,    
		    cache: false,
		    maximizable:true,
		    resizable:true,
		    href:'<%=path%>/mail/addDoc',
			modal : true
	});
}
	function send(){
		//先不考虑标题栏
		$("#mailStatu").val("1");
		$("#mailContent").val(editor.txt.html());
		$("#mainForm").submit();
		
	}
	function quartz(){
		alert("规划功能..")
	}
	function save(){
		$("#mailStatu").val("0");
		$("#mailContent").val(editor.txt.html());
		$("#mainForm").submit();
	}
	function doSearch(value){
		alert('You input: ' + value);
	}
	function addAnnex(){
		//添加图片到textarel
		d=$('#dlg').dialog({    
		    title: '选择附件',    
		    width: 600,    
		    height: 320,    
		    closed: false,    
		    cache: false,
		    maximizable:true,
		    resizable:true,
		    href:'<%=path%>/mail/addAnnex',
			modal : true
		});

	}
</script>
<script>
	var getCursortPosition = function(ctrl) {
		var CaretPos = 0;
		// IE Support
		if (document.selection) {
			ctrl.focus();
			var Sel = document.selection.createRange();
			Sel.moveStart('character', -ctrl.value.length);
			CaretPos = Sel.text.length;
		}
		// Firefox support
		else if (ctrl.selectionStart || +ctrl.selectionStart === 0) {
			CaretPos = ctrl.selectionStart;
		}
		return (CaretPos);
	};

	var selectSomeText = function(element, begin, end) {
		if (element.setSelectionRange) {
			element.setSelectionRange(begin, end);
		} else if (element.createTextRange) {
			var range = element.createTextRange();
			range.moveStart("character", begin);
			range.moveEnd("character", end);
			range.select();
		}
	};

	var delWholeWord = function(text, field, pos) {
		var startIndex = pos;
		if (field.charAt(pos - 1) !== ';') {
			for (var i = pos - 2; i >= 0; i--) {
				if (field.charAt(i) === ';' || i === 0) {
					startIndex = i;
					break;
				}
			}
			selectSomeText(text, startIndex, pos)
		}

	};
	function endWidth(str, endStr) {
		if (str.length == 0) {
			return true;
		}
		var end = str.substring(str.length - 1, str.length);
		if (end == endStr) {
			return true;
		}
		return false;
	};
	$('#addressee').keydown(function(event) {
		if (event.keyCode !== 8) {
			return;
		}
		var bodyText = $(this)[0];
		var bodyField = $(this).val();
		var pos = getCursortPosition(bodyText);
		delWholeWord(bodyText, bodyField, pos);
	});
	$("#addressee").blur(function() {
		var str = $("#addressee").val();
		if (!endWidth(str, ";")) {
			$($("#addressee").val(str + ";"));
		}
	});
	$("#addressee").focus(function(){
		defaultSelect="addressee";
	});
	$("#cc_val").focus(function(){
		defaultSelect="cc_val";
	});
	$('#cc_val').keydown(function(event) {
		
		if (event.keyCode !== 8) {
			return;
		}
		var bodyText = $(this)[0];
		var bodyField = $(this).val();
		var pos = getCursortPosition(bodyText);
		delWholeWord(bodyText, bodyField, pos);
	});
	$("#cc_val").blur(function() {
		var str = $("#cc_val").val();
		if (!endWidth(str, ";")) {
			$($("#cc_val").val(str + ";"));
		}
	});
	$("#hide_val").focus(function(){
		defaultSelect="hide_val";
	});
	$('#hide_val').keydown(function(event) {
		if (event.keyCode !== 8) {
			return;
		}
		var bodyText = $(this)[0];
		var bodyField = $(this).val();
		var pos = getCursortPosition(bodyText);
		delWholeWord(bodyText, bodyField, pos);
	});
	$("#hide_val").blur(function() {
		var str = $("#hide_val").val();
		if (!endWidth(str, ";")) {
			$($("#hide_val").val(str + ";"));
		}
	});
</script>


<script>

function getLinkData() {
    var popupDiv = document.getElementById("popup");//获得对应的div对象
    var inputVal=document.getElementById('search').value;
    if(inputVal==null||inputVal==''){
    	 popupDiv.style.display = "none";
    }else{
    	 popupDiv.style.display = "block";
    }
    var popupBody = document.getElementById("popupBody");//获得对应的tbody对象
    var linkDataProperty = document.getElementById("search"); //获得对应的输入框对象
    clearModels();//清除联想输入提示框的内容
    //利用ajax获取后台的模糊查询的数据，并且封装成下拉列表的形式展现出来
    $.ajax({
    	url : "<%=path %>/pab/search",//对应的Action提交的路径
        type : "post",//提交的方法为post
        data:{'query':linkDataProperty.value},//从前台传递到后台的查询语句的参数
        dataType : "json",  //从Action中返回的数据的类型为json类型的
        async:false,
        cache:false,
        success:function(data) {//当Ajax提交成功时调用的方法
        	  var s=JSON.stringify(data);
              if(data.length==0){return;}
              setOffsets();//设置联想输入下拉列表提示框的位置
              var tr,td,text;
              for (var i = 0; i < data.length; i++) {//根据返回的值，手动的拼tbody的内容
                  text = document.createTextNode(data[i].groupName+"<"+data[i].email+">");//从Action中返回的数据中取出linkDataProperty的值
                  td = document.createElement("td");//创建一个td的对象           
                  tr = document.createElement("tr");//创建一个tr的对象           
                  td.mouseOver = function(){this.className="mouseOver;"};
                  td.mouseOut = function(){this.className="mouseOut;"};
                  td.onclick = function(){populateModel(this)};//单击td是的方法为populateModel             
                  td.appendChild(text);
                  tr.appendChild(td);  
                  tr.align='left';
                  td.height="10";
                  popupBody.appendChild(tr);
              }
        }});
    
    
    $.ajax({
    	url : "<%=path %>/open/api/organization/searchUser",//对应的Action提交的路径
        type : "post",//提交的方法为post
        data:{'search':linkDataProperty.value},//从前台传递到后台的查询语句的参数
        dataType : "json",  //从Action中返回的数据的类型为json类型的
        async:false,
        cache:false,
        success:function(data) {//当Ajax提交成功时调用的方法
        	  var s=JSON.stringify(data);
              if(data.length==0){return;}
              setOffsets();//设置联想输入下拉列表提示框的位置
              var tr,td,text;
              for (var i = 0; i < data.length; i++) {//根据返回的值，手动的拼tbody的内容
                  text = document.createTextNode(data[i].name+"<"+data[i].loginName+">");//从Action中返回的数据中取出linkDataProperty的值
                  td = document.createElement("td");//创建一个td的对象           
                  tr = document.createElement("tr");//创建一个tr的对象           
                  td.mouseOver = function(){this.className="mouseOver;"};
                  td.mouseOut = function(){this.className="mouseOut;"};
                  td.onclick = function(){populateModel(this)};//单击td是的方法为populateModel             
                  td.appendChild(text);
                  tr.appendChild(td);  
                  tr.align='left';
                  td.height="10";
                  popupBody.appendChild(tr);
              }
        }});
    

    
    
    //点击下拉列表中的某个选项时调用的方法
    function populateModel(cell) {
            clearSelect();
            user=userHandler(cell.firstChild.nodeValue);
            //如果已经存在则移除掉
            if($("#"+defaultSelect).val().indexOf(user)!=-1){
            	$("#"+defaultSelect).val($("#"+defaultSelect).val().replace(user,""));
            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val().replace(childVal,""));
            }else{
            	$("#"+defaultSelect).val($("#"+defaultSelect).val()+user);
            	$("#"+defaultSelect+"Team").val($("#"+defaultSelect+"Team").val()+childVal)
            }
            //linkDataProperty.value = cell.firstChild.nodeValue;
            //initOtherData(linkDataProperty.value);利用输入框中的数据调用其他方法，初始化其他数据
            //clearModels1();//清除自动完成行                        
    }
    
    //清除自动完成行，只要tbody有子节点就删除掉，并且将将外围的div的边框属性设置为不可见的
    function clearModels() {
        while (popupBody.childNodes.length > 0) {
            popupBody.removeChild(popupBody.firstChild);
        }
        popupDiv.style.border = "none";
    }
    
    function clearModels1() {
        popupDiv.style.display = "none";
    }
    
    //设置下拉列表的位置和样式
    function setOffsets() {
        var width = linkDataProperty.offsetWidth;//获取linkDataProperty输入框的相对宽度
        var left = getLeft(linkDataProperty);
        var top = getTop(linkDataProperty) + linkDataProperty.offsetHeight;
        popupDiv.style.border = "black 1px solid";
        popupDiv.style.left = left;
        popupDiv.style.top = top;
        popupDiv.style.width = width+"px";
        popupDiv.style.height='400px';
    }
    
    
}


    //获取指定元素在页面中的宽度起始位置
    function getLeft(e) {
        var offset = e.offsetLeft;
        if (e.offsetParent != null) {
            offset += getLeft(e.offsetParent);
        }
        return offset;
    }
    //获取指定元素在页面中的高度起始位置
    function getTop(e) {
        var offset = e.offsetTop;
        if (e.offsetParent != null) {
            offset += getTop(e.offsetParent);
        }
        return offset;
    }


//清空输入框中的数据
function clearSelect() {
    //var linkDataProperty=document.getElementById('search');
    //linkDataProperty.value="";
}

</script>
</html>